<template>
	<el-container class="page-user">
		<el-aside style="width: 240px;" v-loading="showLoading">
			<el-container>
				<el-header style="height: auto;display: block;">
					<div class="user-info-top">
						<!--						<el-avatar :size="70" src="img/avatar.jpg"></el-avatar>-->
						<h2>{{ user.username }}</h2>
						<!--						<p>-->
						<!--							<el-tag-->
						<!--								v-for="(name,index) in user.role_name"-->
						<!--								:key="index"-->
						<!--								effect="dark"-->
						<!--								round size="large"-->
						<!--								disable-transitions>-->
						<!--								{{ name }}-->
						<!--							</el-tag>-->
						<!--						</p>-->
					</div>
				</el-header>
				<el-main class="nopadding">
					<el-menu class="menu" :default-active="page">
						<el-menu-item-group v-for="group in menu" :key="group.groupName" :title="group.groupName">
							<el-menu-item v-for="item in group.list" :key="item.component" :index="item.component"
										  @click="openPage">
								<el-icon v-if="item.icon">
									<component :is="item.icon"/>
								</el-icon>
								<template #title>
									<span>{{ item.title }}</span>
								</template>
							</el-menu-item>
						</el-menu-item-group>
					</el-menu>
				</el-main>
			</el-container>
		</el-aside>
		<el-main>
			<Suspense>
				<template #default>
					<component :is="page"/>
				</template>
				<template #fallback>
					<el-skeleton :rows="3"/>
				</template>
			</Suspense>
		</el-main>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
</template>

<script>
	import {defineAsyncComponent} from 'vue'
	import saveDialog from './save.vue'

	export default {
		name: 'userCenter',
		components: {
			saveDialog,
			account: defineAsyncComponent(() => import('./user/account')),
			password: defineAsyncComponent(() => import('./user/password')),
		},
		data() {
			return {
				dialog: {
					save: false
				},
				menu: [
					{
						groupName: "基本设置",
						list: [
							{
								icon: "el-icon-postcard",
								title: "账户信息",
								component: "account"
							},
							{
								icon: "el-icon-lock",
								title: "修改密码",
								component: "password"
							}
						]
					}
				],
				user: {},
				showLoading: false,
				page: "account"
			}
		},
		mounted() {
			let first_edit_pwd = this.$TOOL.data.get('USER_INFO')['first_edit_pwd'];
			console.log(first_edit_pwd);
			if (first_edit_pwd == 0) {
				this.editpassword()
			} else {
				this.getUserInfo()
			}
		},
		//路由跳转进来 判断from是否有特殊标识做特殊处理
		beforeRouteEnter(to, from, next) {
			next((vm) => {
				if (from.is) {
					//删除特殊标识，防止标签刷新重复执行
					delete from.is
					//执行特殊方法
					vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
						type: 'success',
						center: true
					}).then(() => {
					}).catch(() => {
					})
				}
			})
		},
		methods: {
			//修改密码
			editpassword() {
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open()
				})
			},
			async getUserInfo() {
				this.showloading = true;
				let res = await this.$API['admin.user'].info.get();
				this.showloading = false;
				this.user = res.data;
			},
			openPage(item) {
				this.page = item.index
			}
		}
	}
</script>
